﻿<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Circle Menu</title>
        <style type="text/css">
            body {
                font-family: Helvetica, Arial, FreeSans, sans-serif;
            }
            code {
                font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", 
                    "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", 
                    "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
                background:#eee;
                border:1px solid #ccc;
                padding:0 5px;
                color:#444;
            }
            code.block {
                padding:5px;
                display:block;
                white-space:pre;
                margin:1em;
                overflow:auto;
                -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
                -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
                box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                border-radius: 3px;
            }
            details {
                padding:1em 1em 1em 2em;
                background:#E0E0E0;
                margin-bottom:1em;
            }
            summary {
                margin-left: -1em;
            }
            summary h3{
                margin:0;
                display:inline-block;
            }
            h2 {
                border-top: 4px solid #eee;
            }
            h1 + p {
                margin-right: 3em;
            }
        </style>
        <script type="text/javascript">
            var _gaq = _gaq || [];
            _gaq.push(['_setAccount', 'UA-27581645-1']);
            _gaq.push(['_trackPageview']);
            (function() {
                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
                ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
            })();
        </script>
    </head>
    <body>
        <a href="https://github.com/Zikes/circle-menu">
            <img 
                style="position: absolute; top: 0; right: 0; border: 0;" 
                src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" 
                alt="Fork me on GitHub" 
            />
        </a>
        <h1>Circle Menu</h1>

        <p>A customizable jQuery plugin that emulates the menu in the 
        <a href="http://path.com">Path</a> application.  Includes a selection animation and various 
        animation options for opening and closing the menu.</p>

        <p><strong>
            <a href="http://zikes.github.com/circle-menu/examples/">See it in action.</a>
        </strong></p>

        <h2>Author</h2>

        <p>Jason Hutchinson (<a href="mailto:zikes@zikes.me">zikes@zikes.me</a>)</p>

        <h2>How to Use</h2>

        <p><a href="https://raw.github.com/Zikes/circle-menu/master/jQuery.circleMenu.js">Download</a> and
        include the JS file in your page.</p>

        <p>Create a list, with the first list item representing the icon at the center of the 
        menu.</p>

        <code class="block">&lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;+&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;5&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code>
        <p>The Javascript:</p>

        <code class="block">$('ul').circleMenu({
  item_diameter: 40,
  circle_radius: 100,
  direction: 'bottom-right'
});
</code>

        <h2>Options</h2>
        <details>
            <summary><h3>angle</h3></summary>
            <p>Default: <code>{start: 0, end: 90}</code></p>
            <p>An object specifying the position of the items in relation to the center, measured in
            degrees where 0/360 are on the right and angle travels in a clockwise direction.  An
            alternative to the <code>direction</code> option, if you want more control.</p>
            <p><strong>Example:</strong></p>
            <code class="block">$('ul').circleMenu({angle:{start:260, end:280}});</code>
        </details>
        <details>
            <summary><h3>circle_radius</h3></summary>
            <p>Default: <code>80</code></p>
            <p>The radius of the circle that determines the distance of the items from the 
            center.</p>
            <p><strong>Example:</strong></p>
            <code class="block">$('ul').circleMenu({circle_radius:80});</code>
        </details>
        <details>
            <summary><h3>delay</h3></summary>
            <p>Default: <code>1000</code></p>
            <p>When the menu is triggered on hover, the delay is the amount of time before the items
            will move back in to the center, meaured in milliseconds.</p>
            <p><strong>Example:</strong></p>
            <code class="block">$('ul').circleMenu({delay:500}); // a short delay</code>
        </details>
        <details>
            <summary><h3>direction</h3></summary>
            <p><strong>Options:</strong> <code>top</code> | <code>right</code> | <code>bottom</code>
            | <code>left</code> | <code>top-right</code> | <code>top-left</code> |
            <code>bottom-right</code> | <code>bottom-left</code> | <code>top-half</code> |
            <code>right-half</code> | <code>bottom-half</code> | <code>left-half</code> |
            <code>full</code></p>
            <p>Default: <em>none</em></p>
            <p>The direction of the items in relation to the center.  <code>top</code> will place 
            the items above the center, in a 90 degree semicircle centered upwards.  
            <code>top-half</code> will create a full 180 degree semicircle. <code>full</code> will 
            create a full 360 degree circle, with the first item appearing at the top.</p>
            <p><strong>Example:</strong></p>
            <code class="block">$('ul').circleMenu({direction:'bottom-right'});</code>
        </details>
        <details>
            <summary><h3>item_diameter</h3></summary>
            <p>Default: <code>30</code></p>
            <p>The diameter of each item, in pixels.  Used to set the CSS properties of each item
            including width, height, and border-radius.</p>
            <p><strong>Example:</strong></p>
            <code class="block">$('ul').circleMenu({item_diameter:30});</code>
        </details>
        <details>
            <summary><h3>speed</h3></summary>
            <p>Default: <code>500</code></p>
            <p>The animation speed, in milliseconds.  The number given is the total amount of time 
            it will take for the items to move in or out from the center.</p>
            <p><strong>Example:</strong></p>
            <code class="block">$('ul').circleMenu({speed:1000});</code>
        </details>
        <details>
            <summary><h3>step_in</h3></summary>
            <p>Default: <code>-20</code></p>
            <p>The number of milliseconds between each item moving in to the center when the menu 
            closes.  A negative value will cause the menu to close in reverse, starting with the 
            last item.</p>
            <p><strong>Example:</strong></p>
            <code class="block">$('ul').circleMenu({step_in:60});</code>
        </details>
        <details>
            <summary><h3>step_out</h3></summary>
            <p>Default: <code>20</code></p>
            <p>The number of milliseconds between each item moving out from the center when the menu
            opens.  A negative value will cause the menu to open in reverse, starting with the last 
            item.</p>
            <p><strong>Example:</strong></p>
            <code class="block">$('ul').circleMenu({step_out:60});</code>
        </details>
        <details>
            <summary><h3>transition_function</h3></summary>
            <p><strong>Options:</strong> <code>ease</code> | <code>linear</code> | 
            <code>ease-in</code> | <code>ease-out</code> | <code>ease-in-out</code> | 
            <code>cubic-bezier(n,n,n,n)</code></p>
            <p>Default: <code>ease</code></p>
            <p>The CSS timing function used to control the open/close animation.</p>
            <p><strong>Example:</strong></p>
            <code class="block">$('ul').circleMenu({'transition_function':'linear'});</code>
        </details>
        <details>
            <summary><h3>trigger</h3></summary>
            <p><strong>Options:</strong> <code>hover</code> | <code>click</code> | 
            <code>none</code></p>
            <p>Default: <code>hover</code></p>
            <p>How the menu is triggered to open and close, whether by hovering over the center item
            or clicking on it.</p>
            <p><strong>Example:</strong></p>
            <code class="block">$('ul').circleMenu({trigger:'click'});</code>
        </details>

        <h2>Events</h2>
        <p>The following are events triggered by the menu.</p>
        <details>
            <summary><h3>close</h3></summary>
            <p>Trigged when the menu closes.</p>
            <p><strong>Examples:</strong></p>
            <code class="block">$('ul').circleMenu({close:function(){}});</code>
            <code class="block">$('ul').on('circleMenu-close',function(){});</code>
        </details>
        <details>
            <summary><h3>init</h3></summary>
            <p>Triggered when the menu is initialized.</p>
            <p><strong>Examples:</strong></p>
            <code class="block">$('ul').circleMenu({init:function(){}});</code>
            <code class="block">$('ul').on('circleMenu-init',function(){});</code>
        </details>
        <details>
            <summary><h3>open</h3></summary>
            <p>Triggered when the menu opens.</p>
            <p><strong>Examples:</strong></p>
            <code class="block">$('ul').circleMenu({open:function(){}});</code>
            <code class="block">$('ul').on('circleMenu-open',function(){});</code>
        </details>
        <details>
            <summary><h3>select</h3></summary>
            <p>Triggered when an item is selected.  Passes the jQuery-wrapped item element as the
            second argument to the function provided, after the jQuery event object.</p>
            <p><strong>Examples:</strong></p>
            <code class="block">$('ul').circleMenu({select:function(evt,item){}});</code>
            <code class="block">$('ul').on('circleMenu-select',function(evt,item){});</code>
        </details>

        <h2>Commands</h2>
        <p>The following commands may be used to manipulate the menu once it has been initialized.</p>
        <details>
            <summary><h3>close</h3></summary>
            <p>Closes the menu</p>
            <p><strong>Example:</strong></p>
            <code class="block">$('ul').circleMenu('close');</code>
        </details>
        <details>
            <summary><h3>init</h3></summary>
            <p>Re-intializes the menu.  Handy for use after a new item has been added.</p>
            <p><strong>Example:</strong></p>
            <code class="block">$('ul').append($('&lt;li&gt;&lt;a href="#"&gt;New&lt;/a&gt;&lt;/li&gt;')).circleMenu('init');</code>
        </details>
        <details>
            <summary><h3>open</h3></summary>
            <p>Opens the menu</p>
            <p><strong>Example:</strong></p>
            <code class="block">$('ul').circleMenu('open');</code>
        </details>

        <h2>Styling</h2>
        <p>Classes are applied and removed as appropriate to represent the current state of the menu.</p>
        <details>
            <summary><h3>ul.circleMenu-closed</h3></summary>
            <p>The menu is currently closed.</p>
            <p><strong>Example:</strong></p>
            <code class="block">ul.circleMenu-closed {background-color: red;}</code>
        </details>
        <details>
            <summary><h3>ul.circleMenu-open</h3></summary>
            <p>The menu is currently open.</p>
            <p><strong>Example:</strong></p>
            <code class="block">ul.circleMenu-open {background-color: green;}</code>
        </details>

        <h2>License</h2>
        <p>DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE</p>
        <p>Version 2, December 2004</p>
        <p>Everyone is permitted to copy and distribute verbatim or modified copies of this license 
        document, and changing it is allowed as long as the name is changed.</p>
        <p>DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
        TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION</p>
        <ol start="0"><li>You just DO WHAT THE FUCK YOU WANT TO.</li></ol>
    </body>
</html>